import React, { Component } from "react";

export default class List extends Component {
    constructor (props) {
        super(props);
        this.state = {
            // inputType: false,
            userage: '',
            username: '',
            checked: ''
        };
    }
    changeInput = (item) => {
        // let check = !this.state.inputType
        let check = item.id * 1
        if (item.id * 1 === this.state.checked) {
            check = 0
        }
        this.setState({
            userage: item.userage,
            username: item.username,
            checked: check,
            // checked: item.id * 1,
            // inputType: check
        })
    }
    changeVar = (username, changeVar) => {
        this.setState({
            [changeVar]: username
        })
    }
    clickSet = (item) => {
        // let check = !this.state.inputType
        let check = item.id * 1
        if (item.id * 1 === this.state.checked) {
            check = 0
        }
        this.setState({
            userage: item.userage,
            username: item.username,
            checked: check,
            // checked: item.id * 1,
            // inputType: check
        })
        this.props.changeListById(item.id, this.state.username, this.state.userage)
    }
    render() {
        return (
            <div className="table">
                <div className="tr">
                    <div className="td">编号</div>
                    <div className="td">姓名</div>
                    <div className="td">年龄</div>
                    <div className="td">操作</div>
                    <div className="td">修改</div>
                </div>
                {this.props.list.map((item) => {
                    return (
                        <div className="tr" key={item.id}>
                            <div className="td">{item.id}</div>
                            {
                                // (this.state.inputType && this.state.checked === item.id) ?
                                this.state.checked === item.id ?
                                    <div className="td" >
                                        <input value={this.state.username} onChange={(e) => { this.changeVar(e.target.value, 'username') }} />
                                    </div>
                                    :
                                    <div className="td">{item.username}</div>
                            }
                            {
                                // (this.state.inputType && this.state.checked === item.id) ?
                                this.state.checked === item.id ?
                                    <div className="td" >
                                        <input value={this.state.userage} onChange={(e) => { this.changeVar(e.target.value, 'userage') }} />
                                    </div>
                                    :
                                    <div className="td">{item.userage}</div>
                            }
                            <div className="td" onClick={() => {
                                this.props.delListById(item.id);
                            }}>删除</div>
                            <div className="td" >
                                {
                                    // (this.state.inputType && this.state.checked === item.id) ?
                                    this.state.checked === item.id ?
                                        <>
                                            <button
                                                onClick={() => { this.clickSet(item) }}
                                            >确定</button>
                                            <button onClick={() => { this.changeInput(item) }}>取消</button>
                                        </>
                                        :
                                        <button onClick={() => { this.changeInput(item) }}>编辑</button>
                                }
                            </div>
                        </div>
                    );
                })}
            </div>
        );
    }
}